<template>


  <div class="components-container" style="border: 1px solid #eee">
    <split-pane  :default-percent='12'  split="vertical">
      <template slot="paneL">
        <div>

        <div style="background: #3b91b6;height: 30px;padding: 5px;" class="text-center">机构目录结构</div>
        <el-tree :data="treeOrg" node-key="id" style="width: 100px"
                 @node-click="handleNodeClick"></el-tree>
        </div>

      </template>


      <template slot="paneR">
        <div>


        <div class="filter-container">

          <el-input class="filter-item" placeholder="名称"></el-input>
          <el-input class="filter-item" placeholder="机构简称"></el-input>

          <el-select class="filter-item" placeholder="行政级别" value="">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
          <el-select class="filter-item" placeholder="类型" value="">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
          <el-select class="filter-item" placeholder="状态" value="">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
          <el-button class="filter-item" style="width: 100px" type="primary" @click="query()">查询</el-button>
        </div>
        <div>
          <el-button type="primary" @click="handleCreate(true)">添加</el-button>
          <el-button type="primary">删除</el-button>
          <el-button type="primary">导出</el-button>
        </div>
        <el-table :data="queryResult.list" v-loading.body="listLoading" border:false fit highlight-current-row style="width: 100%">
          <el-table-column align="center" label="名称" width="80">
            <template slot-scope="scope">
              <span>{{scope.row.id}}</span>
            </template>
          </el-table-column>

          <el-table-column width="180px" align="center" label="机构简称">
            <template slot-scope="scope">
              <span>{{scope.row.shortName}}</span>
            </template>
          </el-table-column>

          <el-table-column width="120px" align="center" label="行政级别">
            <template slot-scope="scope">
              <span>{{scope.row.level}}</span>
            </template>
          </el-table-column>

          <el-table-column width="150px" label="行政机构类别">
            <template slot-scope="scope">
              <span>{{scope.row.orgType}}</span>
            </template>
          </el-table-column>

          <el-table-column class-name="status-col" label="状态" width="110">
            <template slot-scope="scope">
              <span>{{scope.row.status}}</span>
            </template>
          </el-table-column>

          <el-table-column min-width="300px" label="类型">
            <template slot-scope="scope">
              <span>{{scope.row.type}}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="Actions" width="120">
            <template slot-scope="scope">

                <el-button type="primary" size="small" icon="el-icon-edit" @click="handleCreate(false)">Edit</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-container">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                         :current-page="listQuery.page"
                         :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
                         layout="total, sizes, prev, pager, next, jumper" :total="queryResult.total">
          </el-pagination>
        </div>
        </div>
      </template>
    </split-pane>


    <el-dialog :visible.sync="dialogFormVisible">
      <article-detail :is-edit='isCreate'></article-detail>
    </el-dialog>

  </div>
</template>

<script>
  import { fetchList } from '@/api/org'
  import { fetchTreeOrg } from '@/api/org'
  import ElFooter from 'element-ui/packages/footer/src/main'
  import ElHeader from 'element-ui/packages/header/src/main'
  import ElButton from 'element-ui/packages/button/src/button'
  import ElSlPanel from 'element-ui/packages/color-picker/src/components/sv-panel'
  import ElInput from 'element-ui/packages/input/src/input'
  import SplitPane from 'vue-splitpane'
  import ArticleDetail from './components/ArticleDetail'
  export default {
    name: 'articleList',
    components: {
      ElInput,
      ElSlPanel,
      ElButton,
      ElHeader,
      ElFooter,
      SplitPane,
      ArticleDetail
    },
    data() {
      return {
        listQuery: {
          orgId: '',
          page: 1,
          limit: 10
        },
        queryResult: {
          list: null,
          total: 0
        },
        treeOrg: [],
        listLoading: true,
        dialogFormVisible: false,
        isCreate: false
      }
    },
    filters: {

    },
    created() {
      this.getList()
      this.getTree()
    },
    methods: {
      query() {
        this.getList()
      },
      handleNodeClick(data, node, ele) {
        // this.listQuery.
        this.listQuery.orgId = data.id
        this.getList()
      },
      handleCreate(isCreate) {
        this.dialogFormVisible = true
        this.isCreate = isCreate
      },
      getList() {
        this.listLoading = true
        fetchList(this.listQuery).then(response => {
          this.queryResult.list = response.data.items
          this.queryResult.total = response.data.total
          this.listLoading = false
        })
      },
      getTree() {
        fetchTreeOrg().then(res => {
          this.treeOrg = res.data
          console.info(res)
        })
      },
      handleSizeChange(val) {
        this.listQuery.limit = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList()
      }
    }
  }
</script>

<style scoped>
  .edit-input {
    padding-right: 100px;
  }

  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }

  .filter-item {
    width: 200px;
  }
</style>
